{% extends "base.html" %}

{% block title %}晨光博客首页{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/components/index.css') }}">
{% endblock %}

{% block content %}
<div class="blog-container">
    <div class="animated-background">
        <div class="particle" data-speed="5"></div>
        <div class="particle" data-speed="3"></div>
        <div class="particle" data-speed="2"></div>
    </div>
    <div class="blog-layout">
        <aside class="sidebar">
            <div class="sidebar-section">
                <h3><i class="fas fa-fire"></i> 热门推荐</h3>
                <ul class="recommended-posts">
                    {% for post in recommended_posts[:20] %}
                    <li>
                        <a href="{{ url_for('posts.show_post', slug=post.slug) }}" class="recommended-post">
                            <span class="post-title">{{ post.title }}</span>
                            <span class="post-meta">
                                <i class="fas fa-eye"></i> {{ post.views|default(0) }}
                                <i class="fas fa-calendar-alt"></i> {{ post.date.strftime('%m/%d') }}
                            </span>
                        </a>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </aside>
        <div class="posts-grid">
            {% for post in posts %}
            <article class="post-card" data-title="{{ post.title }}" data-content="{{ post.html_content|striptags }}">
                <div class="post-meta">
                    <time datetime="{{ post.date }}">{{ post.date.strftime('%B %d, %Y') }}</time>
                    <span class="read-time">5 min read</span>
                </div>
                <h2><a href="{{ url_for('posts.show_post', slug=post.slug) }}">{{ post.title }}</a></h2>
                <div class="post-excerpt">
                    {{ post.html_content|striptags|truncate(200) }}
                </div>
                <a href="{{ url_for('posts.show_post', slug=post.slug) }}" class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></a>
            </article>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
<script>
    // 动态背景效果
    document.addEventListener('mousemove', (e) => {
        const particles = document.querySelectorAll('.particle');
        particles.forEach(particle => {
            const speed = particle.getAttribute('data-speed');
            const x = (window.innerWidth - e.pageX * speed)/100;
            const y = (window.innerHeight - e.pageY * speed)/100;
            particle.style.transform = `translate(${x}px, ${y}px)`;
        });
    });

    // 实时搜索功能
    const fuseOptions = {
        keys: ['title', 'content'],
        threshold: 0.4,
        includeScore: true
    };

    const searchInput = document.querySelector('.search-box input');
    searchInput.addEventListener('input', debounce(searchPosts, 300));

    function searchPosts() {
        const query = searchInput.value.trim();
        if(query.length < 2) {
            document.querySelector('.search-results').innerHTML = '';
            return;
        }

        const posts = Array.from(document.querySelectorAll('.post-card')).map(card => ({
            title: card.dataset.title,
            content: card.dataset.content,
            element: card
        }));

        const fuse = new Fuse(posts, fuseOptions);
        const results = fuse.search(query);

        // 高亮匹配结果
        results.forEach(result => {
            const card = result.item.element;
            card.style.boxShadow = '0 0 0 2px var(--apple-blue)';
            setTimeout(() => card.style.boxShadow = '', 1000);
        });
    }

    function debounce(func, wait) {
        let timeout;
        return function() {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, arguments), wait);
        };
    }
</script>
{% endblock %}